﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>鑫华龙印刷报价</title>
    <style>
        /* 样式保持不变 */
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', 'Microsoft YaHei', Arial, sans-serif;
        }
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            padding: 20px;
            color: #333;
            min-height: 100vh;
        }
        .container {
            max-width: 1000px;
            margin: 0 auto;
            background-color: white;
            border-radius: 12px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
            padding: 30px;
            position: relative;
            overflow: hidden;
        }
        .container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 5px;
            background: linear-gradient(90deg, #3498db, #2ecc71);
        }
        h1 {
            text-align: center;
            margin-bottom: 15px;
            color: #2c3e50;
            font-weight: 600;
        }
        .subtitle {
            text-align: center;
            margin-bottom: 25px;
            color: #7f8c8d;
            font-size: 16px;
        }
        .card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
            border: 1px solid #eaeaea;
        }
        .card-title {
            font-size: 18px;
            margin-bottom: 15px;
            color: #3498db;
            display: flex;
            align-items: center;
        }
        .card-title i {
            margin-right: 8px;
            font-size: 20px;
        }
        .input-group {
            margin-bottom: 15px;
        }
        label {
            display: block;
            margin-bottom: 8px;
            font-weight: 500;
            color: #555;
        }
        .input-with-unit {
            display: flex;
            align-items: center;
        }
        input, select {
            width: 100%;
            padding: 12px 15px;
            border: 1px solid #ddd;
            border-radius: 6px;
            font-size: 16px;
            transition: all 0.3s;
        }
        input:focus, select:focus {
            border-color: #3498db;
            box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
            outline: none;
        }
        .unit {
            color: #7f8c8d;
            margin-left: 10px;
            font-size: 14px;
            min-width: 40px;
        }
        .checkbox-group {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
        .checkbox-group input {
            width: auto;
            margin-right: 10px;
        }
        .calculation-info {
            background-color: #f8f9fa;
            padding: 15px;
            border-radius: 6px;
            margin-bottom: 20px;
            font-size: 14px;
            line-height: 1.5;
            border-left: 4px solid #3498db;
        }
        .calculation-info ul {
            padding-left: 20px;
            margin-top: 10px;
        }
        .calculation-info li {
            margin-bottom: 5px;
        }
        .result {
            background: linear-gradient(135deg, #e8f4fd 0%, #d1ecf1 100%);
            padding: 25px;
            border-radius: 8px;
            text-align: center;
            margin-top: 20px;
            display: none;
            border: 1px solid #bee5eb;
        }
        .result h2 {
            color: #2980b9;
            margin-bottom: 15px;
            font-weight: 600;
        }
        .result-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            margin-top: 15px;
        }
        .result-item {
            background: white;
            padding: 15px;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        .result-label {
            font-size: 14px;
            color: #7f8c8d;
            margin-bottom: 5px;
        }
        .result-value {
            font-size: 18px;
            font-weight: 600;
            color: #2c3e50;
        }
        .highlight {
            font-size: 28px;
            font-weight: 700;
            color: #e74c3c;
            margin: 15px 0;
            padding: 10px;
            background: white;
            border-radius: 6px;
            box-shadow: 0 2px 10px rgba(231, 76, 60, 0.1);
            position: relative;
        }
        .minimum-notice {
            font-size: 14px;
            color: #e67e22;
            margin-top: 5px;
            font-weight: normal;
        }
        .unit-price-highlight {
            font-size: 24px;
            font-weight: 700;
            color: #27ae60;
            margin: 15px 0;
            padding: 10px;
            background: white;
            border-radius: 6px;
            box-shadow: 0 2px 10px rgba(39, 174, 96, 0.1);
            position: relative;
        }
        button {
            background: linear-gradient(135deg, #3498db 0%, #2980b9 100%);
            color: white;
            border: none;
            padding: 14px 20px;
            font-size: 16px;
            border-radius: 6px;
            cursor: pointer;
            width: 100%;
            transition: all 0.3s;
            font-weight: 600;
            letter-spacing: 1px;
            margin-top: 10px;
        }
        button:hover {
            background: linear-gradient(135deg, #2980b9 0%, #3498db 100%);
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);
        }
        .footer {
            text-align: center;
            margin-top: 25px;
            font-size: 13px;
            color: #95a5a6;
        }
        .visualization {
            margin-top: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            text-align: center;
        }
        .canvas-container {
            margin: 15px auto;
            max-width: 100%;
            overflow: auto;
        }
        canvas {
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            max-width: 100%;
        }
        .visualization-title {
            font-size: 16px;
            margin-bottom: 10px;
            color: #2c3e50;
            font-weight: 500;
        }
        .material-description {
            font-size: 13px;
            color: #7f8c8d;
            margin-top: 5px;
            font-style: italic;
        }
        .cost-breakdown {
            margin-top: 20px;
            padding: 15px;
            background: white;
            border-radius: 6px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        .cost-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }
        .cost-item:last-child {
            border-bottom: none;
        }
        .cost-label {
            color: #555;
        }
        .cost-value {
            font-weight: 500;
        }
        .options-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 15px;
        }
        .option-group {
            padding: 15px;
            border: 1px solid #eaeaea;
            border-radius: 6px;
        }
        .option-title {
            font-size: 16px;
            margin-bottom: 10px;
            color: #2c3e50;
            font-weight: 500;
        }
        .minimum-price-info {
            background-color: #fff9e6;
            border: 1px solid #ffeaa7;
            border-radius: 6px;
            padding: 12px 15px;
            margin-top: 15px;
            font-size: 14px;
            color: #e67e22;
        }
        .unit-price-container {
            margin-top: 15px;
            padding: 15px;
            background: linear-gradient(135deg, #e8f6ef 0%, #d1f2eb 100%);
            border-radius: 8px;
            text-align: center;
            border: 1px solid #a3e4d7;
        }
        /* 新增：左右排列样式 */
        .input-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
        }
        /* 新增：布局信息样式 */
        .layout-info {
            margin-top: 10px;
            font-size: 14px;
            color: #555;
        }
        .layout-details {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-top: 5px;
            flex-wrap: wrap;
        }
        .layout-detail-item {
            background: white;
            padding: 8px 15px;
            border-radius: 4px;
            border: 1px solid #eaeaea;
        }
        @media (max-width: 768px) {
            .result-grid {
                grid-template-columns: repeat(2, 1fr);
            }
            .options-grid {
                grid-template-columns: 1fr;
            }
            .input-row {
                grid-template-columns: 1fr;
            }
        }
        @media (max-width: 600px) {
            .container {
                padding: 20px 15px;
            }
            .result-grid {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>鑫华龙印刷报价器</h1>
        <div class="subtitle">输入尺寸和数量，选择材料和工艺，自动计算完整印刷费用</div>
        
        <div class="card">
            <div class="card-title">📏 尺寸</div>
            <div class="input-row">
                <div class="input-group">
                    <label for="width">宽度</label>
                    <div class="input-with-unit">
                        <input type="number" id="width" placeholder="请输入宽度" min="1" value="100">
                        <span class="unit">mm</span>
                    </div>
                </div>
                
                <div class="input-group">
                    <label for="height">高度</label>
                    <div class="input-with-unit">
                        <input type="number" id="height" placeholder="请输入高度" min="1" value="50">
                        <span class="unit">mm</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-title">📊 制作参数</div>
            <div class="input-row">
                <div class="input-group">
                    <label for="quantity">产品数量</label>
                    <div class="input-with-unit">
                        <input type="number" id="quantity" placeholder="请输入产品数量" min="1" value="1000">
                        <span class="unit">pcs</span>
                    </div>
                </div>
                
                <div class="input-group">
                    <label for="spacing">拼版间距</label>
                    <div class="input-with-unit">
                        <input type="number" id="spacing" placeholder="拼版间距" min="0" value="3">
                        <span class="unit">mm</span>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-title">📄 材料选择</div>
            <div class="input-group">
                <label for="material-select">选择材料</label>
                <select id="material-select">
                    <!-- 材料选项将通过JavaScript动态生成 -->
                </select>
                <div class="material-description" id="material-description"></div>
            </div>
        </div>
        
        <div class="card">
            <div class="card-title">⚙️ 工艺选项</div>
            <div class="options-grid">
                <div class="option-group">
                    <div class="option-title">覆膜工艺</div>
                    <div class="checkbox-group">
                        <input type="checkbox" id="lamination" value="lamination">
                        <label for="lamination">需要覆膜</label>
                    </div>
                    <div class="input-group">
                        <label for="lamination-type">覆膜类型</label>
                        <select id="lamination-type">
                            <option value="glossy">光膜 (+0.3元/印)</option>
                            <option value="matte">哑膜 (+0.4元/印)</option>
                        </select>
                    </div>
                </div>
                
                <div class="option-group">
                    <div class="option-title">刀模工艺</div>
                    <div class="checkbox-group">
                        <input type="checkbox" id="die-cutting" value="die-cutting">
                        <label for="die-cutting">需要刀模</label>
                    </div>
                    <div class="input-group">
                        <label for="die-complexity">刀模选择</label>
                        <select id="die-complexity">
                            <option value="digital">数码刀模 (+80元)</option>
                            <option value="simple">简单形状 (+80元)</option>
                            <option value="medium">中等复杂度 (+200元)</option>
                            <option value="complex">复杂形状 (+400元)</option>
                        </select>
                    </div>
                </div>

                <!-- 新增：模切工艺 -->
                <div class="option-group">
                    <div class="option-title">模切工艺</div>
                    <div class="checkbox-group">
                        <input type="checkbox" id="die-cutting-cost" value="die-cutting-cost">
                        <label for="die-cutting-cost">需要模切</label>
                    </div>
                    <div class="input-group">
                        <label for="die-cutting-price">模切单价</label>
                        <div class="input-with-unit">
                            <input type="number" id="die-cutting-price" placeholder="模切单价" min="0" step="0.01" value="0.02">
                            <span class="unit">元/刀</span>
                        </div>
                    </div>
                    <div class="calculation-info" style="font-size: 12px; margin-top: 10px;">
                        💡 <strong>模切费用公式：</strong>(产品数量 ÷ 纵向数量) × 模切单价
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 新增：其他费用 -->
        <div class="card">
            <div class="card-title">💰 其他费用</div>
            <div class="input-group">
                <label for="other-costs">其他费用（如设计费、加急费等）</label>
                <div class="input-with-unit">
                    <input type="number" id="other-costs" placeholder="请输入其他费用" min="0" value="0">
                    <span class="unit">元</span>
                </div>
            </div>
        </div>
        
        <div class="minimum-price-info">
            💡 <strong>起步价说明：</strong>本店设有100元起步价，当计算总费用低于100元时，将按100元收取。
        </div>
        
        <button id="calculate">计算报价</button>
        
        <div class="result" id="result">
            <h2>报价结果</h2>
            <div class="result-grid">
                <div class="result-item">
                    <div class="result-label">产品尺寸</div>
                    <div class="result-value" id="result-size">-</div>
                </div>
                <div class="result-item">
                    <div class="result-label">印刷数量</div>
                    <div class="result-value" id="result-quantity">-</div>
                </div>
                <div class="result-item">
                    <div class="result-label">单版数量</div>
                    <div class="result-value" id="result-per-sheet">-</div>
                </div>
                <div class="result-item">
                    <div class="result-label">所需印数</div>
                    <div class="result-value" id="result-prints">-</div>
                </div>
                <div class="result-item">
                    <div class="result-label">选择材料</div>
                    <div class="result-value" id="result-material">-</div>
                </div>
                <div class="result-item">
                    <div class="result-label">材料单价</div>
                    <div class="result-value" id="result-material-price">-</div>
                </div>
            </div>
            
            <div class="cost-breakdown">
                <div class="cost-item">
                    <div class="cost-label">印刷费用</div>
                    <div class="cost-value" id="cost-printing">0 元</div>
                </div>
                <div class="cost-item">
                    <div class="cost-label">材料费用</div>
                    <div class="cost-value" id="cost-material">0 元</div>
                </div>
                <div class="cost-item" id="lamination-cost-item" style="display: none;">
                    <div class="cost-label">覆膜费用</div>
                    <div class="cost-value" id="cost-lamination">0 元</div>
                </div>
                <div class="cost-item" id="die-cost-item" style="display: none;">
                    <div class="cost-label">刀模费用</div>
                    <div class="cost-value" id="cost-die">0 元</div>
                </div>
                <div class="cost-item" id="die-cutting-cost-item" style="display: none;">
                    <div class="cost-label">模切费用</div>
                    <div class="cost-value" id="cost-die-cutting">0 元</div>
                </div>
                <div class="cost-item" id="other-costs-item" style="display: none;">
                    <div class="cost-label">其他费用</div>
                    <div class="cost-value" id="cost-other">0 元</div>
                </div>
                <div class="cost-item" id="calculated-cost-item">
                    <div class="cost-label">计算总费用</div>
                    <div class="cost-value" id="cost-calculated">0 元</div>
                </div>
                <div class="cost-item" style="border-top: 2px solid #3498db; padding-top: 12px;">
                    <div class="cost-label" style="font-weight: bold;">最终报价</div>
                    <div class="cost-value" style="font-weight: bold; color: #e74c3c;" id="cost-total">0 元</div>
                </div>
            </div>
            
            <!-- 新增：单个产品价格 -->
            <div class="unit-price-container">
                <div class="result-label">单个产品价格</div>
                <div class="unit-price-highlight" id="unit-price">0 元/个</div>
                <div style="font-size: 14px; color: #7f8c8d; margin-top: 5px;">
                    总费用 ÷ 印刷数量
                </div>
            </div>
            
            <div class="visualization">
                <div class="visualization-title">拼版示意图 (980mm × 310mm)</div>
                <div class="canvas-container">
                    <canvas id="layoutCanvas" width="700" height="250"></canvas>
                </div>
                <div class="layout-info">
                    <div>每版可容纳 <span id="layout-count">0</span> 个产品</div>
                    <div class="layout-details">
                        <div class="layout-detail-item">横向：<span id="layout-horizontal">0</span> 个</div>
                        <div class="layout-detail-item">纵向：<span id="layout-vertical">0</span> 个</div>
                        <div class="layout-detail-item">排列方式：<span id="layout-orientation">正常</span></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <div class="footer">
        本计算器仅供参考，实际价格可能因材料、工艺、出血等因素有所不同
    </div>

    <script>
        // 材料数据
        const materials = [
            { id: 'coated', name: '铜版纸', price: 1, description: '常用材料，性价比高' },
            { id: 'transparent', name: '透明龙', price: 2.5, description: '透明材质，美观大方' },
            { id: 'silver-shiny', name: '亮银龙', price: 2.5, description: '亮银色，质感高档' },
            { id: 'silver-matte', name: '亚银龙', price: 2.5, description: '哑光银色，低调奢华' },
            { id: 'dupont', name: '杜邦纸', price: 2, description: '防水耐用，户外适用' },
            { id: 'synthetic', name: '合成纸', price: 1, description: '防水耐撕，强度高' }
        ];

        // 覆膜费用
        const laminationPrices = {
            glossy: 0.3, // 光膜
            matte: 0.4   // 哑膜
        };

        // 刀模费用 - 修正后的价格
        const dieCuttingPrices = {
            digital: 80,   // 数码刀模
            simple: 80,    // 简单形状
            medium: 200,   // 中等复杂度
            complex: 400   // 复杂形状
        };

        // 起步价格
        const minimumPrice = 100;

        // 初始化材料选择下拉框
        function initMaterials() {
            const select = document.getElementById('material-select');
            const description = document.getElementById('material-description');
            
            materials.forEach(material => {
                const option = document.createElement('option');
                option.value = material.id;
                option.textContent = `${material.name} - ${material.price} 元/印`;
                select.appendChild(option);
            });
            
            // 默认选择第一个材料并显示描述
            updateMaterialDescription();
            
            // 当选择改变时更新描述
            select.addEventListener('change', updateMaterialDescription);
        }

        // 更新材料描述
        function updateMaterialDescription() {
            const select = document.getElementById('material-select');
            const description = document.getElementById('material-description');
            const selectedMaterial = materials.find(m => m.id === select.value);
            
            if (selectedMaterial) {
                description.textContent = selectedMaterial.description;
            }
        }

        // 获取选中的材料
        function getSelectedMaterial() {
            const select = document.getElementById('material-select');
            return materials.find(m => m.id === select.value);
        }

        document.getElementById('calculate').addEventListener('click', function() {
            // 获取输入值
            const width = parseFloat(document.getElementById('width').value);
            const height = parseFloat(document.getElementById('height').value);
            const quantity = parseInt(document.getElementById('quantity').value);
            const spacing = parseFloat(document.getElementById('spacing').value);
            const material = getSelectedMaterial();
            
            // 获取工艺选项
            const needLamination = document.getElementById('lamination').checked;
            const laminationType = document.getElementById('lamination-type').value;
            const needDieCutting = document.getElementById('die-cutting').checked;
            const dieComplexity = document.getElementById('die-complexity').value;
            const needDieCuttingCost = document.getElementById('die-cutting-cost').checked;
            const dieCuttingPrice = parseFloat(document.getElementById('die-cutting-price').value) || 0.02;
            
            // 获取其他费用
            const otherCosts = parseFloat(document.getElementById('other-costs').value) || 0;
            
            // 验证输入
            if (isNaN(width) || isNaN(height) || isNaN(quantity) || width <= 0 || height <= 0 || quantity <= 0) {
                alert('请输入有效的尺寸和数量！');
                return;
            }
            
            // 印刷版面尺寸
            const printWidth = 980;
            const printHeight = 310;
            
            // 计算拼版后的单版可容纳数量和布局详情
            const layoutResult = calculateLayout(width, height, spacing, printWidth, printHeight);
            const perSheet = layoutResult.total;
            const horizontalCount = layoutResult.horizontal;
            const verticalCount = layoutResult.vertical;
            const useRotated = layoutResult.rotated;
            
            // 计算总印数
            const totalPrints = Math.ceil(quantity / perSheet);
            
            // 计算印刷费用
            const printingCost = totalPrints * 2;
            
            // 计算材料费用
            const materialCost = totalPrints * material.price;
            
            // 计算覆膜费用
            let laminationCost = 0;
            if (needLamination) {
                laminationCost = totalPrints * laminationPrices[laminationType];
                document.getElementById('lamination-cost-item').style.display = 'flex';
                document.getElementById('cost-lamination').textContent = laminationCost.toLocaleString() + ' 元';
            } else {
                document.getElementById('lamination-cost-item').style.display = 'none';
            }
            
            // 计算刀模费用 - 修正后的计算
            let dieCost = 0;
            if (needDieCutting) {
                dieCost = dieCuttingPrices[dieComplexity];
                document.getElementById('die-cost-item').style.display = 'flex';
                document.getElementById('cost-die').textContent = dieCost.toLocaleString() + ' 元';
            } else {
                document.getElementById('die-cost-item').style.display = 'none';
            }
            
            // 计算模切费用
            let dieCuttingCost = 0;
            if (needDieCuttingCost && verticalCount > 0) {
                dieCuttingCost = (quantity / verticalCount) * dieCuttingPrice;
                document.getElementById('die-cutting-cost-item').style.display = 'flex';
                document.getElementById('cost-die-cutting').textContent = dieCuttingCost.toFixed(2) + ' 元';
            } else {
                document.getElementById('die-cutting-cost-item').style.display = 'none';
            }
            
            // 计算其他费用
            if (otherCosts > 0) {
                document.getElementById('other-costs-item').style.display = 'flex';
                document.getElementById('cost-other').textContent = otherCosts.toLocaleString() + ' 元';
            } else {
                document.getElementById('other-costs-item').style.display = 'none';
            }
            
            // 计算总费用
            const calculatedCost = printingCost + materialCost + laminationCost + dieCost + dieCuttingCost + otherCosts;
            
            // 应用起步价格
            const finalCost = calculatedCost < minimumPrice ? minimumPrice : calculatedCost;
            
            // 计算单个产品价格
            const unitPrice = finalCost / quantity;
            
            // 显示结果
            document.getElementById('result-size').textContent = width + 'mm × ' + height + 'mm';
            document.getElementById('result-quantity').textContent = quantity.toLocaleString() + ' 张';
            document.getElementById('result-per-sheet').textContent = perSheet + ' 个/版';
            document.getElementById('result-prints').textContent = totalPrints + ' 印';
            document.getElementById('result-material').textContent = material.name;
            document.getElementById('result-material-price').textContent = material.price + ' 元/印';
            
            document.getElementById('cost-printing').textContent = printingCost.toLocaleString() + ' 元';
            document.getElementById('cost-material').textContent = materialCost.toLocaleString() + ' 元';
            document.getElementById('cost-calculated').textContent = calculatedCost.toLocaleString() + ' 元';
            document.getElementById('cost-total').textContent = finalCost.toLocaleString() + ' 元';
            
            // 显示布局详情
            document.getElementById('layout-count').textContent = perSheet;
            document.getElementById('layout-horizontal').textContent = horizontalCount;
            document.getElementById('layout-vertical').textContent = verticalCount;
            document.getElementById('layout-orientation').textContent = useRotated ? '旋转' : '正常';
            
            // 显示单个产品价格
            document.getElementById('unit-price').textContent = unitPrice.toFixed(4) + ' 元/个';
            
            // 如果应用了起步价，显示提示
            if (calculatedCost < minimumPrice) {
                document.getElementById('calculated-cost-item').style.display = 'flex';
                document.getElementById('cost-total').innerHTML = finalCost.toLocaleString() + ' 元 <span class="minimum-notice">(已应用100元起步价)</span>';
            } else {
                document.getElementById('calculated-cost-item').style.display = 'none';
                document.getElementById('cost-total').innerHTML = finalCost.toLocaleString() + ' 元';
            }
            
            // 显示结果区域
            document.getElementById('result').style.display = 'block';
            
            // 绘制拼版示意图
            drawLayout(width, height, spacing, printWidth, printHeight, useRotated, horizontalCount, verticalCount);
        });
        
        // 计算拼版方案 - 返回详细信息
        function calculateLayout(width, height, spacing, printWidth, printHeight) {
            // 考虑间距后的实际尺寸
            const itemWidth = width + spacing;
            const itemHeight = height + spacing;
            
            // 计算横向和纵向能放多少个（正常方向）
            const horizontalCountNormal = Math.floor(printWidth / itemWidth);
            const verticalCountNormal = Math.floor(printHeight / itemHeight);
            const countNormal = horizontalCountNormal * verticalCountNormal;
            
            // 计算横向和纵向能放多少个（旋转方向）
            const horizontalCountRotated = Math.floor(printWidth / itemHeight);
            const verticalCountRotated = Math.floor(printHeight / itemWidth);
            const countRotated = horizontalCountRotated * verticalCountRotated;
            
            // 返回数量较多的方案
            if (countRotated > countNormal) {
                return {
                    total: countRotated,
                    horizontal: horizontalCountRotated,
                    vertical: verticalCountRotated,
                    rotated: true
                };
            } else {
                return {
                    total: countNormal,
                    horizontal: horizontalCountNormal,
                    vertical: verticalCountNormal,
                    rotated: false
                };
            }
        }
        
        // 绘制拼版示意图
        function drawLayout(width, height, spacing, printWidth, printHeight, useRotated, horizontalCount, verticalCount) {
            const canvas = document.getElementById('layoutCanvas');
            const ctx = canvas.getContext('2d');
            
            // 清空画布
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 设置缩放比例，使印刷版面适应画布
            const scale = Math.min(canvas.width / printWidth, canvas.height / printHeight) * 0.9;
            const offsetX = (canvas.width - printWidth * scale) / 2;
            const offsetY = (canvas.height - printHeight * scale) / 2;
            
            // 绘制印刷版面
            ctx.fillStyle = '#e8f4fd';
            ctx.fillRect(offsetX, offsetY, printWidth * scale, printHeight * scale);
            ctx.strokeStyle = '#3498db';
            ctx.lineWidth = 2;
            ctx.strokeRect(offsetX, offsetY, printWidth * scale, printHeight * scale);
            
            // 计算实际使用的尺寸
            const finalWidth = useRotated ? height : width;
            const finalHeight = useRotated ? width : height;
            
            // 绘制每个不干胶
            ctx.fillStyle = 'rgba(52, 152, 219, 0.7)';
            ctx.strokeStyle = '#2980b9';
            ctx.lineWidth = 1;
            
            for (let i = 0; i < horizontalCount; i++) {
                for (let j = 0; j < verticalCount; j++) {
                    const x = offsetX + (i * (finalWidth + spacing) + spacing/2) * scale;
                    const y = offsetY + (j * (finalHeight + spacing) + spacing/2) * scale;
                    const w = finalWidth * scale;
                    const h = finalHeight * scale;
                    
                    ctx.fillRect(x, y, w, h);
                    ctx.strokeRect(x, y, w, h);
                }
            }
            
            // 添加标签
            ctx.fillStyle = '#2c3e50';
            ctx.font = '12px Arial';
            ctx.fillText(`印刷版面: ${printWidth}mm × ${printHeight}mm`, offsetX, offsetY - 5);
            ctx.fillText(`不干胶: ${width}mm × ${height}mm`, offsetX, offsetY + printHeight * scale + 15);
        }
        
        // 初始化
        initMaterials();
        document.getElementById('calculate').click();
    </script>
</body>
</html>